<template>
    <div>
        <!-- 搜索框 -->
        <el-row :gutter="20" type="flex" justify="spac-between" align="middle">
            <el-col :span="6">
                <el-input v-model="input" placeholder="请输入档案号"></el-input>
            </el-col>
            <el-col :span="2" class="butWord">
                <el-button type="primary" @click="searchArchives">查询</el-button>
            </el-col>
            <el-col :span="6">
                <el-input v-model="input" placeholder="请输入姓名"></el-input>
            </el-col>
            <el-col :span="2" class="butWord">
                <el-button type="primary" @click="searchName">查询</el-button>
            </el-col>
            <el-col class="butWord">
                <el-button type="primary" @click="testDialog = true">新增</el-button>
            </el-col>
        </el-row>
        <!-- 模态框 -->
        <el-dialog title="新增" :visible.sync="testDialog" width="80%">

            <!-- 模态框中搜索框 -->
            <el-form :inline="true" :model="formDate">
                <el-form-item label="档案号">
                    <el-input v-model="formDate.fN" placeholder="档案号"></el-input>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="formDate.name" placeholder="姓名"></el-input>
                </el-form-item>
                <el-form-item label="年龄">
                    <el-input v-model="formDate.age" placeholder="年龄"></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-input v-model="formDate.sex" placeholder="性别"></el-input>
                </el-form-item>
            </el-form>

            <!-- 答题页面 -->
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane :key="item.name" v-for="item in testSubject" :label="item.title" :name="item.name">
                    {{ item.content }}
                </el-tab-pane>
            </el-tabs>
            <el-button type="primary" @click="nextPage">下一题</el-button>
            <el-button @click="cancelInput = false">取 消</el-button>
        </el-dialog>
    </div>
</template>

<script>
// import ModleTests from './modleTests.vue'
export default {
    data() {
        return {
            //答题页面默认页面
           activeName: 'first',
           //模态框
            testDialog: false,
            input: '',
            //输入框
            formDate: {
                fN: '',
                name: '',
                age: '',
                sex: '',
            },
            // 答题页面内容
            testSubject: [
                {
                    title: '气虚质',
                    name: '1',
                    content: '气虚质',
                    activeName:'first'
                }, 
                {
                    title: '阳虚质',
                    name: '2',
                    content: '阳虚质',
                    activeName:'second'
                }, 
                {
                    title: '阴虚质',
                    name: '3',
                    content: '阴虚质',
                    activeName:'third'
                }, 
                {
                    title: '痰湿质',
                    name: '4',
                    content: '痰湿质',
                    activeName:'fourth'
                }, 
                {
                    title: '湿热质',
                    name: '5',
                    content: '湿热质',
                    activeName:'fifth'
                },
                {
                    title: '血瘀质',
                    name: '6',
                    content: '血瘀质',
                    activeName:'sixth'
                }, 
                {
                    title: '气郁质',
                    name: '7',
                    content: '气郁质',
                    activeName:'seventh'
                }, 
                {
                    title: '特禀质',
                    name: '8',
                    content: '特禀质',
                    activeName:'eighth'
                }, 
                {
                    title: '平和质',
                    name: '9',
                    content: '平和质',
                    activeName:'ninth'
            }],
             tabIndex: 2
        };
    },
    methods: {
        searchArchives(val) {
            // console.log(val);
            // this.tableData=this.tableData.filter((p)=>{
            //     console.log(p);
            //     // return p.filesID
            // })
            this.$axios({
                method: "post",
                url: "visit/add",
                params:{'page':1,'limit':5}
                // data: {
                //     fN: "",
                //     brandTypeId: 0,
                //     describes: "string",
                //     id: 0,
                //     logo: "string",
                // },
                // headers: {
                //     //注意，headers全部小写
                //     token: sessionStorage.getItem("token"),
                // },
            }).then(res => {
                // console.log(res);
            }).catch(err=>{
                // console.log(err);
            })
        },
        searchName() {
            // this.$axios({
            //     method: "post",
            //     url: "/api/brand/add",
            //     data: {
            //         name: "",
            //         brandTypeId: 0,
            //         describes: "string",
            //         id: 0,
            //         logo: "string",
            //     },
            //     headers: {
            //         //注意，headers全部小写
            //         token: sessionStorage.getItem("token"),
            //     },
            // }).then(res => {
            //     console.log(res);
            //     if (res.data.code==0) {
            //         alert("添加品牌成功");
            //     }else if(res.data.code === 50005){
            //         this.$emit("back-click", false);
            //     }
            // })
        },

        nextPage() {

        },
        cancelInput() {
            testDialog: false;
        },
        handleClick(tab, event) {
            // console.log(tab, event);
        }
    },

}
    // components: { ModleTests }

</script>

<style>
el-input {
    width: 50%;
}
</style>